define([
    'jquery',
    'backbone',
    'Mustache',
    'text!./box.html',
    'dialog',
    'draggabilly',
        'jquery.panzoom'
], function ($, Backbone, Mustache, boxTpl, dialog, draggabilly) {
    'use strict';

    var View = Backbone.View.extend({

        // 事件绑定
        events: {
            'click a.thumb'  : 'dialogZoomImage',
            'click a.delete' : 'delete'
        },

        // 初始化
        initialize: function () {},

        // 渲染
        render: function () {
            var thisView = this;

            var html = Mustache.render(boxTpl, thisView.model);
            thisView.$el.html(html);
            
            return thisView;
        },

        // 弹窗预览图片
        dialogZoomImage: function () {
            var thisView = this;

            // 关闭置顶窗口
            if (dialog.getCurrent()) {
                dialog.getCurrent().remove();
            }


            // 弹窗
            var $img    = thisView.$el.find('a.thumb'),
                id      = thisView.cid,
                title   = '预览：'+thisView.model.name,
                content = '<div id="'+id+'" style="max-width: 900px; max-height: 300px;">'
                    +$img.html()
                    +'</div><br><button>重置缩放</button>';

            dialog({id: id, title: title, content: content}).show();


            // 支持无限制拖动
            new draggabilly('[role="dialog"]');


            // 支持图片缩放
            var $panzoom = $('#'+id),
                $img     = $panzoom.find('img');

            // 重置缩放
            $img.panzoom({
                $reset: $panzoom.next().next()
            });

            // 滚轮缩放
            $panzoom.on('mousewheel.focal', function(e) {
                e.preventDefault();

                var delta   = e.delta || e.originalEvent.wheelDelta;
                var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
                $img.panzoom('zoom', zoomOut, {
                    increment : 0.3,
                    animate   : false,
                    focal     : e
                });
            });

        },

        // 删除
        delete: function () {
            var thisView = this;

            var param    = thisView.options.delete.param;
                param.id = thisView.model.id;
            var url      = thisView.options.delete.url;

            $.get(url, param, function (data) {
                var status = data.status,
                    info   = data.info,
                    file   = data.data;

                if (status) {
                    thisView.remove();
                }
                else {
                    alert(info);
                }
            });

        }

    });

    return View;
});
